import 'package:bot_toast/bot_toast.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

typedef _CallBack = void Function(String roomCode);

class AddHomeDialog extends StatefulWidget {
  final Image? image;
  final _CallBack? callback;
  final CancelFunc cancelFunc;

  AddHomeDialog({
    required this.cancelFunc,
    this.callback,
    this.image,
  });
  @override
  _AddHomeDialogState createState() => _AddHomeDialogState();
}

class _AddHomeDialogState extends State<AddHomeDialog> {
  List<String> _roomCodeArray = ["", "", "", "", "", ""];

  final List<String> _btnArray = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '清除',
    '0',
    '←'
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.black54,
        child: Center(
            child: UnconstrainedBox(
                //在Dialog的外层添加一层UnconstrainedBox
                constrainedAxis: Axis.vertical,
                child: SizedBox(
                    //再用SizeBox指定宽度
                    width: ScreenUtil().screenHeight,
                    child: Dialog(
                      elevation: 0.0,
                      backgroundColor: Colors.transparent,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(Consts.circular),
                        ),
                        height: ScreenUtil().screenHeight,
                        width: ScreenUtil().screenHeight,
                        child: Column(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                color: Colors.orange[300],
                                borderRadius: const BorderRadius.only(
                                    topLeft: Radius.circular(Consts.circular),
                                    topRight: Radius.circular(Consts.circular)),
                              ),
                              height: ScreenUtil().screenHeight / 10,
                              child: Stack(
                                children: [
                                  Center(
                                    child: Text("请输入房间号",
                                        style: TextStyle(
                                            fontSize: 18.sp,
                                            fontWeight: FontWeight.bold)),
                                  ),
                                  Align(
                                      alignment: Alignment.centerRight,
                                      child: Material(
                                          color: Colors.white.withOpacity(0),
                                          child: Ink(
                                              //设置背景 默认矩形
                                              child: InkWell(
                                            //水波纹的颜色
                                            splashColor: Colors.red,
                                            child: SizedBox(
                                              height:
                                                  ScreenUtil().screenHeight /
                                                      10,
                                              width: ScreenUtil().screenHeight /
                                                  10,
                                              child: Icon(
                                                Icons.cancel_outlined,
                                                size: 40.sp,
                                              ),
                                            ),
                                            onTap: () {
                                              widget.cancelFunc();
                                            },
                                          ))))
                                ],
                              ),
                            ),
                            Container(
                              height: ScreenUtil().screenHeight / 10,
                              width: double.infinity,
                              margin: EdgeInsets.symmetric(
                                  vertical: ScreenUtil().screenHeight / 10 / 3,
                                  horizontal:
                                      ScreenUtil().screenHeight / 10 / 3),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5.00),
                                border: Border.all(
                                    color: Colors.black.withOpacity(0.3)),
                                color: Colors.grey[300],
                              ),
                              child: Stack(
                                children: [
                                  Align(
                                    child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceEvenly,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: [1, 2, 3, 4, 5]
                                            .map((e) => SizedBox(
                                                  height: ScreenUtil()
                                                          .screenHeight /
                                                      10 /
                                                      2,
                                                  width: 1,
                                                  child: const DecoratedBox(
                                                    decoration: BoxDecoration(
                                                        color: Colors.grey),
                                                  ),
                                                ))
                                            .toList()),
                                  ),
                                  _roomCodeArray.isNotEmpty
                                      ? Align(
                                          child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: _roomCodeArray
                                                  .map((e) => Expanded(
                                                          child: Center(
                                                              child: Text(
                                                        e.toString(),
                                                        style: TextStyle(
                                                            fontSize: 20.sp,
                                                            fontWeight:
                                                                FontWeight
                                                                    .bold),
                                                      ))))
                                                  .toList()),
                                        )
                                      : Container()
                                ],
                              ),
                            ),
                            Expanded(
                                child: Container(
                              padding: EdgeInsets.all(
                                  ScreenUtil().screenHeight / 10 / 4),
                              child: GridView(
                                physics: const NeverScrollableScrollPhysics(),
                                padding:
                                    const EdgeInsets.symmetric(vertical: 0),
                                gridDelegate:
                                    const SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 3, //每一行的列数
                                  mainAxisSpacing: 5, //主轴方向上的间距
                                  crossAxisSpacing: 10, //交叉轴轴方向上的间距
                                  childAspectRatio: 2,
                                ),
                                children: _btnArray
                                    .map((item) => Material(
                                        borderRadius:
                                            BorderRadius.circular(5.00),
                                        //设置背景 默认矩形
                                        color: Colors.orange[300],
                                        child: Ink(
                                            child: InkWell(
                                                onTap: () {
                                                  if (item.toString() == '←') {
                                                    var emptyIndex =
                                                        _roomCodeArray
                                                            .indexOf("");
                                                    if (emptyIndex == 0) {
                                                      return;
                                                    }
                                                    if (emptyIndex == -1) {
                                                      _roomCodeArray.last = "";
                                                    } else {
                                                      _roomCodeArray[
                                                          emptyIndex - 1] = "";
                                                    }
                                                    setState(() {});
                                                    return;
                                                  }
                                                  if (item.toString() == '清除') {
                                                    _roomCodeArray =
                                                        List.generate(
                                                            6, (index) => "");
                                                    setState(() {});
                                                    return;
                                                  }

                                                  var emptyIndex =
                                                      _roomCodeArray
                                                          .indexOf("");
                                                  if (emptyIndex == -1) {
                                                    return;
                                                  }
                                                  _roomCodeArray[emptyIndex] =
                                                      item.toString();
                                                  setState(() {});
                                                  if (fillRoomCode()) {
                                                    widget.callback!(
                                                        _roomCodeArray.join());
                                                    setState(() {});
                                                  }
                                                },
                                                splashColor:
                                                    const Color.fromARGB(
                                                        255, 166, 248, 173),
                                                child: Container(
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5.00),
                                                    border: Border.all(
                                                        color: Colors.black
                                                            .withOpacity(0.3)),
                                                  ),
                                                  child: Center(
                                                      child: Text(
                                                    item.toString(),
                                                    style: TextStyle(
                                                        fontSize: 25.sp,
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  )),
                                                )))))
                                    .toList(),
                              ),
                            ))
                          ],
                        ),
                      ),
                    )))));
  }

  bool fillRoomCode() {
    return !_roomCodeArray.contains("");
  }
}

class Consts {
  Consts._();

  static const double padding = 16.0;
  static const double circular = 10.0;
  static const double avatarRadius = 16.0;
}
